<template>
  <div id="loginPage" :style="`background-image: url(&quot;${bgImg}&quot;);`">
    <el-card shadow="always">
      <h1 class="text-center fs-5">欢迎使用后台管理系统</h1>
      <el-form ref="form" :rules="formRules" :model="formData" size="small">
        <el-form-item prop="user_name">
          <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="formData.user_name" clearable autofocus
            maxlength="16">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" prefix-icon="el-icon-lock" v-model="formData.password" show-password clearable
            maxlength="16">
          </el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="d-flex justify-content-between align-items-center">
            <el-input placeholder="验证码" prefix-icon="el-icon-picture-outline" v-model="formData.captcha" clearable
              maxlength="4" @change="onLogin()">
            </el-input>
            <captcha-image ref="captcha" :height="32"></captcha-image>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loadingState.login" @click="onLogin()">立即登录</el-button>
          <el-button :loading="loadingState.forgetPassword" @click="onForgetPassword()">忘记密码？</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import CaptchaImage from "@/components/CaptchaImage/CaptchaImage.vue";
/**
 * 登录页面
 */
export default {
  name: "Login",
  components: { CaptchaImage },
  data() {
    return {
      // 背景图片
      bgImg: "",
      // 表单数据
      formData: {
        user_name: "",
        password: "",
        captcha: "",
      },
      // 表单校验规则
      formRules: {
        user_name: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 16 个字符",
            trigger: "blur",
          },
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "change" },
          { length: 4, message: "长度为 4 个字符", trigger: "blur" },
        ],
      },
      // 加载状态
      loadingState: {
        login: false,
        forgetPassword: false,
      },
    };
  },
  methods: {
    // 加载视图数据
    loadData() {
      let n = Math.ceil(Math.random() * 27);
      this.bgImg = `../../../static/images/loginbg/${n}.jpg`;
    },
    // 登录操作
    onLogin() {
      this.$refs.form.validate((valid) => {
        console.log("校验结果", valid);
        if (!valid) {
          return false;
        }
        if (!this.$refs.captcha.check(this.formData.captcha)) {
          this.$message.error("验证码无效");
          this.$refs.captcha.refresh();
          this.formData.captcha = "";
          return;
        }
        this.loadingState.login = true;
        this.vuiAjax
          .post(this.apiUrls.login, this.formData)
          .then((res) => {
            this.loadingState.login = false;
            console.log("请求成功 res=", res);
            if (!res.success) {
              this.$message.error(res.message);
              return;
            }
            this.vuiLoginState.setToken(res.data.token);
            this.$router.replace({ path: '/' });
          })
          .catch((err) => {
            this.loadingState.login = false;
            console.log("请求失败 error=", err);
          });
      });
    },
    // 忘记密码操作
    onForgetPassword() { },
  },
  mounted() {
    this.loadData();
  },
};
</script>

<style>
#loginPage {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: #ffffff;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loginPage .el-card {
  width: 360px;
  background-color: rgba(255, 255, 255, 0.5);
}

#loginPage .el-card__body {
  padding: 10px 20px;
}

#loginPage h1 {
  color: #333;
  text-shadow: 5px 5px 8px rgba(255, 255, 255, 0.5);
}

#loginPage .el-form-item {
  margin-bottom: 18px;
}

#loginPage .el-form-item__error {
  color: #555;
  font-size: 12px;
  line-height: 1;
  padding-top: 3px;
}
</style>